第一個hook -useState - Day 10 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 10

Modern Web

現在就學React.js 系列第 10 篇

第一個hook -useState - Day 10

16th鐵人賽 react

鯨魚

2024-09-24 19:53:45

147 瀏覽

分享至

今日要來了解狀態(state)的使用，為何會有state呢？
React提供了一個方法，來監控資料的變化，
當資料內容有變動時，畫面就會被更新。
我們要來學習第一個 React hoot － useState。

React State

Sate是一種用於儲存在組件內部的狀態或資料，
當State改變時，組件就會重新渲染，更新畫面。

基本寫法如下：

const [count, setCount] = useState(0);

useState 函式會返回一個陣列，

通常使用 陣列解構 取出兩個元素

想要監控的資料- 用於存放變數的資料。
更新資料的方法- 這是用於改變資料的方法，名稱可以自己取 (通常以 set 開頭)。

再看一個實作的範例：

import React, {useState} from 'react'

function Counter() {
  // 使用 useState 宣告一個名為 count 的 state 變數，初始值為 0
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>你點擊了 {count} 次</p>
      {/* 點擊按鈕時，呼叫 setCount 函式更新 count 的值 */}
      <button onClick={() => setCount(count + 1)}>點擊我</button>
    </div>
  )
}

export default Counter

`useState` 的運行

在上面的範例中，首先用 useState(0) 來定義
初始值是 0 的 state 變數 count，
以及更新 count 的 setCount 函式。

當點擊到按鈕時，setCount 函式被觸發將 count 的值增加 1。
state 的改變，React 會重新渲染元件(re-render)，更新畫面來顯示最新的 count 值。
而 useState 是可以傳入各種型別的，如數字、字串、布林、陣列、物件

看下方的範例：

import React, { useState } from 'react';

// 數字計數器
function NumberCounter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>數字計數器</h2>
      <p>目前數字是 {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

// 字串顯示
function Greeting() {
  const [name, setName] = useState('Alice');

  return (
    <div>
      <h2>字串顯示</h2>
      <p>你好, {name}!</p>
      <button onClick={() => setName('Bob')}>變更名字</button>
    </div>
  );
}

// Bollean開關
function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <div>
      <h2>Bollean開關</h2>
      <p>開關狀態: {isOn ? '開啟' : '關閉'}</p>
      <button onClick={() => setIsOn(!isOn)}>切換</button>
    </div>
  );
}

// 陣列任務清單
function TodoList() {
  const [todos, setTodos] = useState(['學習 React', '寫測試']);

  const addTodo = () => {
    setTodos([...todos, '新任務']);
  };

  return (
    <div>
      <h2>陣列任務清單</h2>
      <ul>
        {todos.map((todo) => (
          <li key={todo}>{todo}</li>
        ))}
      </ul>
      <button onClick={addTodo}>新增任務</button>
    </div>
  );
}

// 物件用戶資料
function UserProfile() {
  const [profile, setProfile] = useState({ name: 'Alice', age: 25 });

  const updateName = () => {
    setProfile({ ...profile, name: 'Bob' });
  };

  return (
    <div>
      <h2>物件用戶資料</h2>
      <p>名字: {profile.name}</p>
      <p>年齡: {profile.age}</p>
      <button onClick={updateName}>更改名字</button>
    </div>
  );
}

function App() {
  return (
    <>
      <NumberCounter />
      <Greeting />
      <Toggle />
      <TodoList />
      <UserProfile />
    </>
  );
}

export default App;

使用 Hook 的兩個重要規則

在學習使用 React Hook 時，有兩個非常重要的規則必須遵守，這樣才能確保程式的正常運作。

1. 只在最上層呼叫 Hook

不要在迴圈、條件式或巢狀函式內呼叫 Hook。 Hook 應該在函式的「最上層」呼叫，而不是在任何條件判斷（如 if）或迴圈內呼叫。
為什麼這麼做？ 當 React 每次渲染你的元件時，Hook 都必須以相同的順序被呼叫。這樣 React 才能正確地追蹤每個 Hook 的狀態。如果你在迴圈或條件式內呼叫 Hook，這個順序可能會改變，導致 React 無法正常工作。

簡單範例：

// 正確：在函式的最上層呼叫 Hook
function MyComponent() {
  const [count, setCount] = useState(0); // 正確

  if (count > 0) {
    // 錯誤：不要在條件判斷內呼叫 Hook
    // const [error, setError] = useState(null);
  }

  return <div>{count}</div>;
}

2. 只在 React 元件或自定義 Hook 中呼叫 Hook

不在一般的 JavaScript 函式中呼叫 Hook。 Hook 應該只在 React 元件的函式內部，或是在自定義 Hook 中被使用。
為什麼這麼做？ 這樣可以確保所有與狀態相關的邏輯都在 React 元件內處理，並且讓你的程式碼更加清晰可見。

簡單範例：


// 正確：在 React 元件中使用 Hook
function MyComponent() {
  const [count, setCount] = useState(0); // 正確
  return <div>{count}</div>;
}

// 正確：在自定義 Hook 中使用 Hook
function useCustomHook() {
  const [state, setState] = useState(0); // 正確
  return state;
}

//錯誤：在一般函式中使用 Hook
function regularFunction() {
  // const [value, setValue] = useState(0); // 錯誤
}

透過遵守這兩條規則，你可以確保在每次元件渲染時，
React 能正確地追蹤狀態和效果，讓應用程式運行更加順暢。